<template>
  <div class="question-student">
    <div class="question-bar">
      <div class="question-bar-title">
        <img src="../../../assets/image/train/question.svg"
             alt="question" />
        课题问答
      </div>
      <a-button class="purple-button"
                type="primary"
                shape="round"
                @click="showModal">提问</a-button>
    </div>
    <question-list :refresh="refresh"></question-list>
    <a-modal class="question-ask"
             :visible="visible"
             :confirm-loading="confirmLoading"
             @cancel="handleCancel">
      <template slot="title">发布提问</template>
      <a-form-model ref="ruleForm"
                    :model="form"
                    :rules="rules">
        <a-form-model-item prop="title"
                           has-feedback>
          <a-input v-model="form.title"
                   class="form-in-title"
                   placeholder="请输入标题" />
        </a-form-model-item>
        <a-form-model-item prop="description"
                           has-feedback>
          <a-textarea v-model="form.description"
                      placeholder="请输入正文"
                      class="form-in-des"
                      :auto-size="{ minRows: 8, maxRows: 8}" />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button class="purple-button"
                  type="primary"
                  shape="round"
                  @click="handleSubmit">发布</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import QuestionList from '../../../components/train/QuestionList.vue';
import api from "./../../../common/api"
export default {
  name:'StudentQues',
  data () {
    return {
      visible: false,
      confirmLoading: false,
      refresh: false,
      form: {
        title: "",
        description: "",
      },
      rules: {
        title: [
          {
            required: true,
            message: " ",
            trigger: "blur",
            whitespace: true
          },
        ],
        description: [
          {
            required: true,
            message: " ",
            trigger: "blur",
            whitespace: true
          },
        ],
      },
    };
  },
  methods: {
    showModal () {
      this.visible = true;
    },
    handleSubmit () {
      this.confirmLoading = true;
      let that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const title = that.form.title;
          const description = that.form.description;
          this.$postCPG(api.addQuestion, {
            questionContent: description,
            questionTitle: title,
          })
            .then((res) => {
              if (res.success) {
                this.$message.success('已提交问题√');
                this.confirmLoading = false;
                this.visible = false;
                this.refresh = !this.refresh;
                console.log("success to submit question")
              } else {
                console.log("error submit!!");
                this.$message.error('出了点小问题，请重试×');
                console.log("fail to submit question")
                return false;
              }
            })
        } else {
          // console.log("empty items");
          this.confirmLoading = false;
          return false;
        }
      })
    },
    handleCancel () {
      this.visible = false;
      this.$refs.ruleForm.clearValidate();
    },
  },
  components: {
    QuestionList
  }
};
</script>

<style lang="less" scoped>
@import '../../../styles/global.less';

.question-student {
  .question-bar {
    background-color: #fff;
    width: 100%;
    height: 90px;
    padding: 0 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .question-bar-title {
      font-size: 16px;
      font-family: PingFang SC, sans-serif;
      font-weight: 400;
      line-height: 22px;
      color: #242425;
    }
    .purple-button {
      width: 120px;
      height: 30px;
      font-size: 16px;
    }
  }
}
.question-ask {
  /deep/ .ant-modal-header {
    height: 45px;
    .ant-modal-title {
      font-size: 14px;
      font-family: PingFang SC, sans-serif;
      font-weight: bold;
      line-height: 20px;
      color: #000000;
    }
  }
  /deep/ .ant-modal-body {
    // height: 45px;
    .form-in-title {
      // border: none;
      // border-bottom: 1px solid #A7A7A7;
      height: 42px;
      font-size: 16px;
      font-family: PingFang SC, sans-serif;
      // font-weight: bold;
      line-height: 22px;
    }
  }
  /deep/ .ant-modal-footer {
    padding: 0;
    padding-bottom: 25px;
    border: none;
    text-align: center;
    .purple-button {
      width: 120px;
    }
  }
}
</style>
